<template>
	<up-sticky>
		<view class="search-header" :style="{
		padding: `${top}px 24px 20px`,
	}">
			<view class="header-brand">
				<up-image src="/static/svg/act-top.svg" width="32px" height="32px"></up-image>
				<view class="page-title">骑行活动</view>
			</view>
			<view class="search-actions">
				<text class="iconfont">&#xe621;</text>
				<up-search bgColor="#FFFFFF" placeholderColor="#94a3b8" :clearabled="false" placeholder="搜索活动、地点"
					height="40px" :show-action="false" v-model="keyword"></up-search>
				<up-image src="/static/svg/search.svg" width="40px" height="40px"></up-image>
			</view>
		</view>
		<view class="category-tabs withe-bg">
			<ActSearchItem text="全部" active />
			<ActSearchItem text="城市骑行" />
			<ActSearchItem text="郊外探索" />
			<ActSearchItem text="技术交流" />
			<ActSearchItem text="聚餐社交" />
		</view>
	</up-sticky>

	<view class="up-p-l-48 up-p-r-48">
		<ActItem></ActItem>
		<ActItem></ActItem>
		<ActItem></ActItem>
		<ActItem></ActItem>
		<ActItem></ActItem>
		<ActItem></ActItem>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import ActItem from '@/components/Act.vue';
	import ActSearchItem from '@/components/ActSearchItem.vue';
	const top = uni.getMenuButtonBoundingClientRect().top
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app'
	const keyword = ref('');
	
	
	onShareAppMessage(()=>{
		return {
			title: 'Ninebot车友俱乐部活动',
			path: '/pages/Event'
		}
	})
	
</script>

<style scoped lang="scss">
	.search-header {
		display: flex;
		flex-direction: column;
		gap: 16px;
		background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
		border-bottom: 1px solid rgba(226, 232, 240, 0.8);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

		.header-brand {
			display: flex;
			align-items: center;
			gap: 12px;

			.page-title {
				font-size: 16px;
				font-weight: bold;
				color: #1f2937;
				margin: 0;
				background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}
		}

		.search-actions {
			display: flex;
			align-items: center;
			gap: 12px;

			.iconfont {
				font-size: 20px;
				position: absolute;
				left: 42px;
				color: #64748b;
				z-index: 2;
			}
		}
	}

	.category-tabs {
		display: flex;
		gap: 12px;
		padding: 16px 24px;
		overflow-x: auto;
		position: relative;
		z-index: 1;
		margin-bottom: 24px;
	}



	::v-deep .u-search__content {
		padding: 0 !important;
		border-style: unset !important;
		border-width: 0 !important;
	}

	::v-deep .u-search__content__input {
		padding: 0 16px 0 48px;
		margin: 0 !important;
		border: 2px solid #e2e8f0;
		border-radius: 24px;
		font-size: 15px;
		background: #ffffff;
		color: #1e293b;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
	}

	::v-deep .u-scroll-list {
		padding-bottom: 0 !important;
	}
</style>